<template>
	<view>
		<!-- 顶部信息 -->
		<view class="wid-100 userinfo-box position-relative overflow-hidden">
			<view class="position-absolute wid-100 p-left p-top"><image :src="adminSet.user_bj" mode="widthFix" lazy-load></image></view>
			<view class="d-flex j-sp z-index55 position-relative center pad-t-60">
				<!-- 头像与昵称 -->
				<view class="a-center">
					<view class="userPic border-r overflow-hidden" @tap="opMySet">
						<image :src="userInfo.headimg" mode="widthFix" lazy-load></image>
					</view>
					<view class="mar-left25" v-if="userInfo.id<=0" @tap="opMySet">
						<view class="userName font-28">点击登入/注册 </view>
					</view>
					<view class="mar-left25" v-else>
						<view class="userName font-28" @tap="opMySet">{{userInfo.nickname}}
							<text class="mar-left15 font-22 black60-zt" v-if="userInfo.levelid==1">({{userInfo.level_name}})</text>
							<text class="mar-left15 font-22 main-zt" v-if="userInfo.levelid==2">({{userInfo.level_name}})</text>
						</view>
						<view class="font-22 mar-top20 black50-zt" v-if="userInfo.tel==''" @tap="opMySet">请绑定手机号</view>
						<view class="font-22 mar-top20 black50-zt a-center" v-else>
							<view>{{userInfo.tel}}</view>
							<view class="huanbang zhifu-zt mar-left15 border-r pad-l-20 pad-r-20 font-20 line-h35" @tap="opMySet">换绑</view>
						</view>
					</view>
				</view>
				<view class="icon-set black40-zt font-36" @tap="opMySet"></view>
			</view>
			<!--信息 -->
			<view class="d-a-j-c mar-top70 font-24 pad-b-30 black20-zt z-index55 position-relative">
				<view class="flex-1 a-center flex-column position-relative" @tap="open('yue')">
					<view class="font-34 font-w-b">{{userInfo.money}}</view>
					<view class="mar-top15 black50-zt">余额</view>
					<view class="main-bj-jb white-zt font-20 tag line-h32 position-absolute">点我充值</view>
				</view>
				<view class="flex-1 a-center flex-column" @tap="open('score')">
					<!-- <view class="font-34 font-w-b">{{userInfo.score}}</view>
					<view class="mar-top15 black50-zt">积分</view> -->
				</view>
				<view class="flex-1 a-center flex-column" @tap="open('coupon',0)">
					<!-- <view class="font-34 font-w-b">{{userInfo.coupon}}</view>
					<view class="mar-top15 black50-zt">卡券包</view> -->
				</view>
			</view>
		</view>
		<!-- Vip入口 -->
		<view class="vipBox center710 border-r-20 overflow-hidden position-relative z-index55">
			<image :src="adminSet.vip_img" mode="widthFix" lazy-load></image>
		</view>
		<!-- 服务订单 -->
		<view class="center710 white-bj border-r-25 overflow-hidden pad-t-20 pad-b-30 mar-top20">
			<view class="a-center j-sp pad-l-30 pad-r-20">
				<view class="font-w-b font-28 line-h38 a-center">
					<text class="fenge main-bj"></text>服务订单
				</view>
				<view class="font-22 black60-zt a-center line-h38" @tap="openBanner(2,'/pagesC/orderfu/orderfu?index=',-1,2)">全部订单<text class="icon-jinru"></text></view>
			</view>
			<view class="d-flex mar-top40 a-center">
				<view class="order-item a-center flex-1 flex-column" @tap="openBanner(item.type,item.page,item.parameter,item.url_type)" v-for="(item,index) in fuOrderList" :key="index">
					<view class="order-icon"><image :src="item.icon" mode="widthFix" lazy-load></image></view>
					<view class="text-overflow black50-zt font-24 text-center line-h35 mar-top20">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 商品订单 -->
		<view class="center710 white-bj border-r-25 overflow-hidden pad-t-20 pad-b-30 mar-top20" v-if="orderList.length>0">
			<view class="a-center j-sp pad-l-30 pad-r-20">
				<view class="font-w-b font-28 line-h38 a-center">
					<text class="fenge main-bj"></text>商品订单
				</view>
				<view class="font-22 black60-zt a-center line-h38" @tap="open('order',-1)">全部订单<text class="icon-jinru"></text></view>
			</view>
			<view class="d-flex mar-top40 a-center">
				<view class="order-item a-center flex-1 flex-column" @tap="open('order',0)" v-for="(item,index) in orderList" :key="index">
					<view class="order-icon"><image :src="item.icon" mode="widthFix" lazy-load></image></view>
					<view class="text-overflow black50-zt font-24 text-center line-h35 mar-top20">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- banner -->
		<view class="center710 border-r-25 overflow-hidden mar-top20" v-if="bannerList.length>0" @tap="openBanner(bannerList[0].type,bannerList[0].hrefurl,bannerList[0].id,bannerList[0].url_type)">
			<image :src="bannerList[0].url" mode="widthFix" lazy-load></image>
		</view>
		<!-- 常用工具 -->
		<view class="center710 white-bj border-r-25 overflow-hidden pad-t-20 pad-b-30 mar-top20">
			<view class="a-center j-sp pad-l-30 pad-r-20">
				<view class="font-w-b font-28 line-h38 a-center">
					<text class="fenge main-bj"></text>常用工具
				</view>
			</view>
			<view class="mar-top40 center710 overflow-hidden" v-if="jinlist3.length>0">
				<scroll-view scroll-x="true" @scroll="changeScroll">
					<view class="jingang-d-box pad-t-10">
						<view class="item d-inline-block" v-for="(item,index) in jinlist3" :key="index">
							<button class="d-a-j-c flex-column position-relative" v-if="item.parameter==99" open-type="contact" @contact="contact" style="background-color: #ffffff;">
								<view class="img-d"><image :src="item.icon" mode="widthFix" lazy-load></image></view>
								<view class="text-overflow black50-zt font-24 text-center line-h35 mar-top20">{{item.name}}</view>
							</button>
							<view class="d-a-j-c flex-column position-relative" @tap="openBanner(item.type,item.page,item.parameter,item.url_type)" v-else>
								<view class="img-d"><image :src="item.icon" mode="widthFix" lazy-load></image></view>
								<view class="text-overflow black50-zt font-24 text-center line-h35 mar-top20">{{item.name}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="wid-100 d-a-j-c">
					<view class="scrol-x-Dot-box border-r position-relative">
						<view class="scrol-x-Dot border-r position-absolute" :style="{left:left+'px'}"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="index-list-box center720 black97-bj pad-b-30">
			<!-- 商品列表 -->
			<!-- <index-shop-list :leftPro="leftPro" :rightPro="rightPro"></index-shop-list> -->
		</view>
		<!-- 自动定义导航 -->
		<m-tabbar-item :tabIndex="tabIndex"></m-tabbar-item>
	</view>
</template>

<script>
	import mTabbarItem from "@/components/m-tabbar-item.vue"
	import indexShopList from "@/components/index-shop-list.vue"
	import login from '@/common/login.js'
	export default {
		components:{
			mTabbarItem,
			indexShopList
		},
		data() {
			return {
				user_id:0,
				token:'',
				left:0,
				tabIndex:4,
				adminSet:{},
				fuOrderList:[],
				orderList:[],
				bannerList:[],
				jinlist3:[],
				leftPro:[],
				rightPro:[],
				userInfo:{
					nickname:'',
					tel:'',
					id:undefined,
					headimg:''
				}
			}
		},
		onLoad() {
			uni.hideTabBar();
			//初始化数据
			this.token=this.$user.state.token
			this.user_id=this.$user.state.userId
			this.GetAdmin()
			this.user()
			this.GetJin()
			this.getShopList()
			//开启分享
			wx.showShareMenu({
				withShareTicket:true,
				menus:["shareAppMessage","shareTimeline"]
			})
		},
		onShow() {
			this.token=this.$user.state.token
			this.user_id=this.$user.state.userId
			this.user()
		},
		onPullDownRefresh() {
			this.GetAdmin()
			this.user()
			this.getShopList()
			//关闭下拉刷新
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},2000)
		},
		//设置分享好友的内容
		onShareAppMessage(res) {
			if (res.from=="button"){
				console.log(res.target)
			}
			return {
				title:"鑫意到家",
				path: '/pages/index/index?rid=',
				desc:"鑫意到家 · 洁新留下！",
				imageUrl:"../../static/202310131154405365.png"
			}
		},
		//分享朋友圈
		onShareTimeline(res) {
			return {
				title: '鑫意到家 · 洁新留下！',
				type: 0,
				summary: "鑫意到家 · 洁新留下！",
			}
		},
		methods: {
			contact(e){
				console.log(e)
			},
			//进入店铺/
			open(type,id,lei){
				getApp().open(type,id,lei)
			},
			//打开banner
			openBanner(type,url,id,url_type){
				getApp().openBanner(type,url,id,url_type)
			},
			//点击进入个人信息
			opMySet(){
				if(this.$user.state.token==""){
					uni.showToast({
						icon:'none',
						title:'登入超时！正在重新登入！',
						duration:2000
					})
					setTimeout(function(){
						login.Login()
					},1000)
				}else{
					uni.navigateTo({
						url:'/pagesC/mySet/mySet'
					})
				}
				
			},
			//获取商品列表
			async getShopList(type){
				const one={
					aid:1,
					limit:20,
					type:1,
					page:1,
					pid:2
				}
				await this.$api.GetShopList(one).then(res=>{
					this.leftPro=res.data.list.filter( (v,i) => i % 2 === 0 )
					this.rightPro=res.data.list.filter( (v,i) => i % 2 !== 0 )
				})
			},
			//获取金刚区
			async GetJin(){
				const jingang={
					aid: 1,
					status:1
				}
				await this.$api.GetJingang(jingang).then(res=>{
					res.data.list.forEach(item=>{
						if(item.jid==5){
							this.fuOrderList.push(item)
						}else if(item.jid==6){
							this.orderList.push(item)
						}else if(item.jid==7){
							this.jinlist3.push(item)
						}
					})
				})
				await this.$api.GetBanner(jingang).then(res=>{
					res.data.list.forEach(item=>{
						if(item.images!=""){
							if(item.id==5){
								this.bannerList=JSON.parse(item.images)
							}
						}
					})
					
				})
			},
			//获取用户详情
			async user(){
				if(this.$user.state.token==""){
					return
				}else{
					const one={
						mid:parseFloat(this.$user.state.userId),
						aid:1
					}
					await this.$api.UserInfo(one).then(res=>{
						this.userInfo=res.data
					})
				}
				
			},
			//获取系统基本信息
			async GetAdmin(){
				const one={
					id:1
				}
				await this.$api.GetAdminSet(one).then(res=>{
					this.adminSet=res.data.list
				})
			},
			//监听金刚区滑动
			changeScroll(e){
				//计算移动的距离
				this.left=e.detail.scrollLeft/20
			}
		}
	}
</script>

<style lang="scss">
	
	body{
	    background-color: #f6f6f6;  
	} 
	.userinfo-box{
		height: 375rpx;
		.userPic{
			width: 90rpx;
			height: 90rpx;
			border: 3rpx solid #fff;
		}
		.huanbang{
			background-color: #eaefff;
		}
		.tag{
			padding-left: 10rpx;
			padding-right: 10rpx;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			border: 2rpx solid #ffffff;
			top: -40rpx;
			right: 20%;
		}
	}
	.vipBox{
		margin-top: -40rpx;
	}
	.fenge{
		width: 7rpx;
		height: 22rpx;
		border-radius: 100rpx;
		margin-right: 8rpx;
	}
	.order-item{
		.order-icon{
			width: 50rpx;
		}
	}
	.jingang-d-box{
		width: 1400rpx;
		.item{
			width: 175rpx;
			margin-bottom: 40rpx;
			.img-d{
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
	.scrol-x-Dot-box{
		width: 71rpx;
		height: 10rpx;
		background: #e8e8e8;
		.scrol-x-Dot{
			height: 10rpx;
			width: 35.5rpx;
			background: #7ab13d;
		}
	}
	button::after{border: initial;}
	.button::after{ border: none; }
</style>
